<template>
  <div id="menuBar">
    <el-menu :default-active="activeIndex"
             class="el-menu-demo"
             mode="horizontal"
             @select="handleSelect"
             :background-color="'rgba(255,255,255,' + transparency + ')'"
             style="border-bottom: 0; position: relative"
             active-text-color="#409EFF"
             :router="true">
      <a href="/web"> <img style="margin-top: 5px; margin-left: 30px" src="../assets/logo.png" width="120px" /></a>

      <!-- 大屏显示搜索框 -->

      <el-submenu index="0" style="
          width: 100px;
          text-align: center;
          float: right;
          background-color: rgba(255, 255, 255, 0);
        " v-if="isLogin">
        <template slot="title">
          <div id="headImage" style="
              position: absolute;
              z-index: 9;
              margin-left: 12px;
              background-color: rgba(255, 255, 255, 0);
            ">
            <el-avatar size="medium" :src="currentUserInfo.avatar">
            </el-avatar>
          </div>
        </template>
        <el-menu-item index="/UserCenter/details">个人中心</el-menu-item>
        <el-menu-item index="/article/write" v-if="isNormal">发布文章</el-menu-item>
        <el-menu-item index="/userCenter/review" v-if="review">媒体审核</el-menu-item>
        <el-menu-item @click="layout()">退出登录</el-menu-item>
      </el-submenu>
      <el-menu-item index="/login" style="
          width: 130px;
          text-align: center;
          float: right;
          background-color: rgba(255, 255, 255, 0);
        " v-else>
        登录 / 注册
      </el-menu-item>


      <el-menu-item  index="/hot" style="
            width: 100px;
            float: right;
            background-color: rgba(255, 255, 255, 0);
          ">
        热门
      </el-menu-item>

      <el-menu-item index="/web" style="
            width: 100px;
            float: right;
            background-color: rgba(255, 255, 255, 0);
          ">
        首页
      </el-menu-item>
    </el-menu>
    <div class="line"></div>
  </div>
</template>

<script>

export default {
  props: { "transparency": Number },

  data() {
    return {
      isNormal:false,
      currentUserInfo: {},
      activeIndex: this.$route.path,
      isLogin: false,
      keyword: "",
      review:false,
    };
  },
  methods: {

    layout() {
      this.$router.push("/login");
      this.$message.success('退出成功');
      this.isLogin = false;
      window.localStorage.removeItem("cecFrontToken");
    },

    handleSelect(routePath) {
      this.activeIndex = routePath

    },

    getCurrentUserInfo() {
      this.axios.get("/user/personal").then(({ data }) => {
        if(data.state == 20000){
          this.currentUserInfo = data.data;
          if(data.data.role == "媒体"){
              this.isNormal = true;
              this.review = false;
          }else{
            this.review = true;
          }
        }else {
          this.$message.error(data.message);
        }

      })
    },
  },

  created() {
    const tokenStr = window.localStorage.getItem('cecFrontToken');
    if (tokenStr == null) {
      this.isLogin = false;
    } else {
      this.isLogin = true;
    }
  },
  mounted() {
    this.getCurrentUserInfo();
  },

};
</script>

<style>
.el-menu--collapse .el-menu .el-submenu,
.el-menu--popup {
  min-width: 100px !important;
}

.el-menu-item {
  text-align: center;
  background-color: rgba(255, 255, 255, 0) !important;
}

.el-submenu__title {
  background-color: rgba(255, 255, 255, 0) !important;
}

.el-input__inner {
  background-color: transparent !important;
  border: 1px solid #efefef !important;
}
</style>
